import { globalContainer } from "@/user.InterfaceLayer/constants/styles/CommonStyles";
import React from "react";
import AdminMenu from "../../UI_KIT/Organisms/AdminMenu.Organisms";
import TextAtom from "../../UI_KIT/Atoms/Text.Atom";
import TextAtomEnum from "../../UI_KIT/Atoms/Text.Atom/enum";
import { ICommonComponentProps } from "@/user.InterfaceLayer/constants/commonComponentProps/type";

interface AdminLayoutProps {
  error?: boolean;
  isLoading?: boolean;
  title?: string;
  block?: ICommonComponentProps["children"];
}

const AdminLayout: React.FC<AdminLayoutProps> = (props) => {
  const { error, isLoading, title, block } = props;

  return (
    <div className={`text-textColor ${globalContainer}`}>
      <div className="grid md:grid-cols-4 md:gap-5 mt-8">
        <AdminMenu />
        <div className="overflow-x-auto md:col-span-3">
          <TextAtom type={TextAtomEnum.enum_h2} className="mb-4">
            {title}
          </TextAtom>
          {isLoading ? (
            <div>Loading...</div>
          ) : error ? (
            <div className="alert-error">{error}</div>
          ) : (
            <>{block}</>
          )}
        </div>
      </div>
    </div>
  );
};

export default React.memo(AdminLayout);
